<h3 id="event-bubbling">Bubbling standard event</h3>

<div @onclick="@(() => LogEvent("parent onclick"))">
    <button id="button-with-onclick" @onclick="@(() => LogEvent("target onclick"))">Button with onclick handler</button>
    <button id="button-without-onclick" >Button without onclick handler</button>
</div>

<h3>Bubbling custom event</h3>

<div onsneeze="@(new Action(() => LogEvent("parent onsneeze")))">
    <div id="element-with-onsneeze" onsneeze="@(new Action(() => LogEvent("target onsneeze")))">Element with onsneeze handler</div>
    <div id="element-without-onsneeze" >Element without onsneeze handler</div>
</div>

<h3>Non-bubbling standard event</h3>

<!-- The new Action(...) is needed until we add support for onfocus -->
<div @onfocus="@(new Action(() => LogEvent("parent onfocus")))">
    <p>With onfocus: <input id="input-with-onfocus" @onfocus="@(new Action(() => LogEvent("target onfocus")))" /></p>
    <p>Without onfocus: <input id="input-without-onfocus" /></p>
</div>

<h3>Event log</h3>

<textarea readonly @bind="logValue"></textarea>

@code {
    string logValue = string.Empty;

    void LogEvent(string message)
    {
        logValue += message + Environment.NewLine;
    }
}
